<div class="categories">
    <template>
      <el-button type="success" plain @click="showCateBox">添加分类</el-button>
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.9)"
          :data="categoriesList"
          stripe
          style="width: 100%">
          <!-- label ：设置列名称
          prop ：提供列内容的属性名

          tree-key ：区分其他菜单，不添加该key会导致所有菜单同时展开，添加该key只展开该菜单
          level-key ：设置菜单级别，以缩进形式表示子菜单
          child-key ：指定使用哪个属性名称表示子菜单
          parent-key ：父级菜单id，不添加该key，则无法收起子菜单 -->
          <el-table-tree-column
            :indent-size="20"
            level-key="cat_level"
            tree-key="cat_id"
            parent-key="cat_pid"
            child-key="children"
            prop="cat_name" label="分类名称" width="220">
          </el-table-tree-column>

          <!-- <el-table-column
            prop="cat_name"
            label="分类名称"
            width="180">
          </el-table-column> -->
          <el-table-column
            prop="cat_deleted"
            label="是否有效"
            width="180">
            <template slot-scope= "scope">
              {{scope.row.cat_deleted === false ? '是':'否'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="cat_level"
            label="层级">

          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  icon="el-icon-edit"
                ></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                ></el-button>
              </template>
          </el-table-column>
        </el-table>
      </template>
 <!-- 分页 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :current-page="pagenum"
    @current-change="changePage"
    >
  </el-pagination>

  <!-- 添加分类对话框 -->
  <el-dialog title="编辑用户" :visible.sync="isShowCateBox">
      <el-form :model="cateBox" label-width="100px">

        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="cateBox.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级名称">
            <el-cascader
            :options="cateAddList"
            v-model="cateBox.cat_pid_arr"
            change-on-select
            :props="{value:'cat_id',label:'cat_name'}"
            ></el-cascader>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="isShowCateBox = false">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
      </div>
  </el-dialog>
</div>
